<template>
    <div class="container">
        <section class="section-1">
            <Party></Party>
        </section>
        <section class="section-2">
            <Academic></Academic>
        </section>
        <div class="bg-image">
            <section class="section-3">
                <HealthProject></HealthProject>
            </section>
            <section class="section-4">
                <Science></Science>
            </section>
        </div>
        <section class="section-5" v-if="userStore.user && userStore.user?.vip">
            <Members></Members>
        </section>
    </div>
</template>
<script setup>
import Party from '@/components/index/Party.vue'
import Academic from '@/components/index/Academic.vue'
import HealthProject from '@/components/index/HealthProject.vue'
import Science from '@/components/index/Science.vue'
import Members from '@/components/index/Members.vue'
const userStore = useUserStore()

</script>
<style lang="scss" scoped>
.container {
    background: #fff;

    // font-size:rem(20px,12px);
    .section-1 {
        background-color: #fff;
        padding: 2rem 0 3rem;
    }

    .section-2 {
        background-color: #F7FAFF;
        padding: 2rem 0 3rem;
    }

    .bg-image {
        background: url('/images/index-bg1.png') no-repeat center/cover;
        // height: 1000px;
    }

    .section-3 {
        padding: 2rem 0 3rem;
    }

    .section-4 {
        padding: 2rem 0 3rem;
    }

    .section-5 {
        background: url('/images/index-bg2.png') no-repeat center/cover;
        padding: 2rem 0 3rem;
    }

    @media (max-width: 768px) {

        // padding:0 .8rem;
        .section-1 {
            padding: 1rem 0.8rem 1rem;
        }

        .section-2 {
            padding: 1rem 0.8rem 1rem;
        }

        .bg-image {
            .section-3 {
                padding: 1rem 0.8rem 1rem;
            }
        }

        .section-4 {
            padding: 0rem 0.8rem 1rem;
        }

        .section-5 {
            padding: 1rem 0.8rem 1rem;
        }
    }
}
</style>